<template>
	<view>
		<view :class="['menu-box',position == 'left' ? 'left' : 'right']">
			<view class="mask" v-show="visible" @click="close"></view>
			<view class="menu-box__content" :style="style">
				<view class="menu-box__content-body">
					<slot></slot>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuVisible: false
			}
		},
		props: {
			visible: {
				type: Boolean,
				default: false
			},
			position: {
				type: String,
				default: 'left'
			},
			width: {
				type: String,
				default: '50%'
			}
		},
		computed: {
			style() {
				if(this.visible && this.position == 'left') {
					return {
						'left': 0,
						'width': this.width,
					}
				} else if(this.visible && this.position == 'right'){
					return {
						'right': 0,
						'width': this.width,
					}
				} else if(!this.visible && this.position == 'left'){
					return {
						'left': '-' + this.width,
						'width': this.width,
					}
				} else if(!this.visible && this.position == 'right'){
					return {
						'right': '-' + this.width,
						'width': this.width,
					}
				}
			}
		},
		methods: {
			close() {
				this.$emit('update:visible',false)
			}
		}
	}
</script>

<style>
	.menu-box {
		position: fixed;
		top: 0;
		z-index: 9999999999999; 
		height: 100%;
	}
	
	.left {
		left: 0;
	}
	
	.right {
		right: 0;
	}
	
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .3);
		z-index: 999;
	}
	
	.menu-box__content {
		position: absolute;
		height: 100%;
		top: 0;
		bottom: 0;
		background-color: #fff;
		z-index: 9999;
		box-shadow: 0 0 30rpx 1rpx rgba(255, 255, 255, .3);
		transition: all .4s ease;
	}
	
	.menu-box__content-body {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 9999999999999;
		overflow-y: scroll;
	}
</style>
